<!-- 查找商户弹出框 -->
<template>
<form class="form-horizontal" role="form" @submit.prevent="submitPlat" autocomplete="off">
  <div class="modal fade" :id="modalId" tabindex="-1" role="dialog" :aria-labelledby="'modal-'+ modalId +'-lable'" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" :id="'modal-'+ modalId +'-lable'">指定{{platName()}}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group row">
            <label class="control-label">{{platName()}}编号：</label>
            <div style="display:inline-block">
              <input type="text" v-model.trim="platNo" @input="delayTouch($v.platNo)" class="form-control">
              <p class="invalid-feeback" v-if="$v.platNo.$error && !$v.platNo.required">{{platName()}}编号不能为空.</p>
              <p class="invalid-feeback" v-if="$v.platNo.$error && !$v.platNo.find">查无此{{platName()}}.</p>
            </div>
          </div>
          <div class="form-group row" v-show="platId()">
            <label class="control-label">{{platName()}}名称：</label>
            <div style="display:inline-block">
              <input type="text" v-model="plat.name" readonly class="form-control-plaintext">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取 消</button>
          <button type="submit" class="btn btn-primary" :disabled="!platId()">下一步</button>
        </div>
      </div>
    </div>
  </div>
</form>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'

  import { required } from 'vuelidate/lib/validators'

  const modalId = 'modal-find-plat-' + new Date().getTime()

  const search = {
    nowPage: 1,
    pageSize: 1
  }

  const touchMap = new WeakMap()

  function modal(isShow) {
    $(() => {
      $('#' + this.modalId).modal(isShow ? 'show' : 'hide')
    })
  }
  function open() {
    this.modal(true)
  }
  function hide() {
    this.modal(false)
  }
  function response(plat) {
    this.$emit('plat', plat)
    this.modal(false)
  }
  function delayTouch($v) {
    $v.$reset()
    if (touchMap.has($v)) {
      clearTimeout(touchMap.get($v))
    }
    touchMap.set($v, setTimeout($v.$touch, 500))
  }
  function find(platNo) {
    this.plat = {}
    if (!platNo) return true
    return new Promise((resolve) => {
      search[this.platType + 'No'] = platNo
      //http://localhost:8981/undefined(platType)/page?nowPage=1&pageSize=1&undefinedNo=1
      $.get(cfg.serverPath + '/' + this.platType + '/page', search, result => {
        if (result.status != 0) {
          $(document).failMsg(result.message)
          resolve(false)
          return
        }
        let list = result.data.list
        if (!list) {
          resolve(false)
          return
        }
        this.plat = list[0]
        resolve(true)
      })
    })
  }
  function submitPlat() {
    this.$v.$touch()
    if (!this.$v.$invalid) {
      this.response(this.plat)
    }
  }
  function platName() {
    if (this.platType == 'agent') {
      return '服务商'
    } else if (this.platType == 'merch') {
      return '商户'
    } else if (this.platType == 'shop') {
      return '门店'
    } else if (this.platType == 'user') {
      return '客户'
    }
  }
  function platId() {
    return this.plat[this.platType + 'Id']
  }
  export default {
    props: {
      "platType": String
    },
    data() {
      return {
        modalId,
        platNo: "",
        plat: {}
      }
    },
    methods: {
      open,
      hide,
      response,
      modal,
      delayTouch,
      find,
      submitPlat,
      platName,
      platId
    },
    validations: {
      platNo: {
        required,
        find
      }
    }
  }
</script>